<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <son-a></son-a>
        <input type="button" value="修改" @click="change">
    </div>
</body>
<script src="./vue.global.js"></script>
<script>
    
    // provide{} : 在父组件提供数据
    //injuect:[''] ：在子组件注入

    //依赖注入：
    //1. 在父组件里使用 provide提供数据
    //    1）. provide 提供的数据不能使用组件本身的数据 ， provide提供的数据不是响应式的
    //      provide：{ 属性名：值}

    //     2）. provide提供和的数据可以组件本身的数据，provide提供的数据不是响应式的
    //           //   provide(){
        //     return {
        //         属性名1：this.组件的数据
        //     }
        //   }  

        // 如果希望 provide 提供的数据称为响应式的， 需要结合组合式函数computed()
        
    // 2.在子孙组件里使用 inject 拿到数据
    //  inject：['属性名1']




    //定义一个子组件
    const SonA ={
        inject:['msg'],
        template:`
            <h4>我是子组件</h4>
            <p>{{msg.value}}</p>


        
        `
    }   


    const app = Vue.createApp({
        data(){
            return {
                value:'heihei'
            }
        },
        components:{
            SonA,
        },
        provide(){
            console.log("provide")
            return{
                //使用 computed函数， 让数据称为响应式的
                msg: Vue.computed(() =>this.value)
            }
            
        },
        methods:{
            change(){
                this.value = this.value+"1",
                console.log("this.value", this.value)
            }
        }
    })
    app.mount("#app")
</script>
</html>